<form class="js-form" autocomplete="off">
  <div class="modal-head">
    <h2>Bulk Apply Permission Template</h2>
  </div>

  <div class="modal-body">
    <div class="js-modal-messages"></div>

    {{#if done}}
      <div class="alert alert-success">
        {{t 'projects_role.apply_template.success'}}
      </div>
    {{/if}}

    {{#unless done}}
      {{#notNull permissionTemplates}}
        <div class="modal-field">
          <label for="project-permissions-template">
            Template<em class="mandatory">*</em>
          </label>
          <select id="project-permissions-template">
            {{#each permissionTemplates}}
              <option value="{{id}}">{{name}}</option>
            {{/each}}
          </select>
        </div>
      {{else}}
        <i class="spinner"></i>
      {{/notNull}}


      <div class="modal-field">
        <label>Apply To</label>
        <ul style="padding-top: 4px;">
          {{#if selectionTotal}}
            <li>
              <input value="selected" id="apply-to-selected" name="apply-to"
                     type="radio" checked>
              <label
                  for="apply-to-selected"
                  style="float: none; left: 0; display: inline; padding: 0;">
                Only Selected ({{selectionTotal}})
              </label>
            </li>
          {{/if}}
          <li>
            <input value="all" id="apply-to-all" name="apply-to" type="radio"
                   {{#unless selectionTotal}}checked{{/unless}}>
            <label
                for="apply-to-all"
                style="float: none; left: 0; display: inline; padding: 0;">
              All ({{total}})
            </label>
          </li>
        </ul>
      </div>
    {{/unless}}
  </div>

  <div class="modal-foot">
    {{#unless done}}
      {{#notNull permissionTemplates}}
        <button class="js-apply">Apply</button>
      {{/notNull}}
    {{/unless}}
    <a href="#" class="js-modal-close">Close</a>
  </div>
</form>
